<!--
* @author wn
* @date 2023/10/25 11:21:07
* @description: 地址管理
!-->
<template>
	<!-- 地址列表 -->
	<scroll-view class="scroll-view" scroll-y>
		<!-- 收货地址项 -->
		<view class="item" v-if="addressList.length">
			<uni-swipe-action>
				<uni-swipe-action-item
					v-for="add in addressList"
					:auto-close="false"
					:key="add.id"
					:right-options="options"
					@click="swipeClick($event, add.id)"
				>
					<view class="item-content" @tap="onChangeAddress(add)">
						<view class="user">
							<text>{{ add.receiver }}</text>
							<text class="contact">{{ add.contact }}</text>
							<text v-if="add.isDefault === 1" class="badge">默认</text>
						</view>
						<view class="locate">{{ add.fullLocation }} {{ add.address }}</view>
						<!-- stop阻止冒泡 ,TODO H5 端需添加 .prevent 阻止链接的默认行为 -->
						<navigator
							class="edit"
							hover-class="none"
							:url="`/pagesMember/address-form/address-form?id=${add.id}`"
							@tap.stop="() => {}"
							@tap.prevent="() => {}"
						>
							修改
						</navigator>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
		<view v-else class="blank">暂无收货地址</view>
	</scroll-view>
	<!-- 添加按钮 -->
	<navigator
		class="add-btn"
		hover-class="none"
		url="/pagesMember/address-form/address-form"
	>
		新建地址
	</navigator>
</template>
<script lang="ts" setup>
import {
	getMemberAddressListApi,
	deleteMemberAddressByIdApi,
} from '@/api/address'
import { useAddressStore } from '@/stores'
import { onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
// 获取收货地址列表数据
const addressList = ref<AddressItem[]>([])
const getAddressList = async () => {
	const list = await getMemberAddressListApi()
	addressList.value = list
}

// 新建或者修改页 返回时 不会触发 onload 会触发 onShow
onShow(() => getAddressList())

// 滑动删除 插槽内容
const options = [
	{
		text: '取消',
		style: {
			backgroundColor: '#007aff',
		},
	},
	{
		text: '确认',
		style: {
			backgroundColor: '#F56C6C',
		},
	},
]
/**
 * 点击滑块 会自动触发 滑块消失
 * 暂时没有找到控制 滑块消失的方法
 */
// 点击 滑动删除--插槽内容  事件
const swipeClick = (
	event: UniHelper.UniSwipeActionItemOnClickEvent,
	id: string
) => {
	if (event.content.text === '取消') return
	// 二次确认
	uni.showModal({
		content: '删除地址?',
		confirmColor: '#27BA9B',
		success: async res => {
			if (res.confirm) {
				// 根据id删除收货地址
				await deleteMemberAddressByIdApi(id)
				// 重新获取收货地址列表
				getAddressList()
				// 成功提示
				uni.showToast({ icon: 'success', title: '删除地址成功' })
			}
		},
	})
}

// 修改收货地址
const { changeSelectedAddress } = useAddressStore()
const onChangeAddress = (address: AddressItem) => {
	changeSelectedAddress(address)
	// 返回上一页
	uni.navigateBack()
}
</script>
<style lang="scss">
page {
	display: flex;
	flex-direction: column;
}
.scroll-view {
	margin-top: 20rpx;
	.uni-swipe {
		margin: 0 20rpx 20rpx;
	}
	.item-content {
		position: relative;
		padding: 40rpx 30rpx;
		border-radius: 10rpx;
		background-color: #fff;
		line-height: 1;
		box-shadow: 0 4rpx 6rpx rgba(200, 200, 200, 0.3);
		// 阴影
		.user {
			font-size: 28rpx;
			margin-bottom: 20rpx;
			color: #333;
			.contact {
				color: #666;
				margin: 0 10rpx;
			}
			.badge {
				display: inline-block;
				padding: 4rpx 10rpx 2rpx 14rpx;
				margin-top: 2rpx;
				font-size: 26rpx;
				color: $primary-color;
				border-radius: 6rpx;
				border: 1rpx solid $primary-color;
			}
		}
		.locate {
			line-height: 1.6;
			font-size: 26rpx;
			color: #333;
		}
		.edit {
			position: absolute;
			top: 36rpx;
			right: 30rpx;
			line-height: 1;
			padding-left: 20rpx;
			border-left: 1rpx solid #666;
			font-size: 26rpx;
			color: #666;
		}
		/* 删除按钮 */
		.delete-button {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 50px;
			height: 100%;
			font-size: 28rpx;
			color: #fff;
			border-radius: 0;
			padding: 0;
			background-color: #cf4444;
		}
	}
	.blank {
		margin-top: 400rpx;
		text-align: center;
		font-size: 38rpx;
		color: #888;
	}
}
.add-btn {
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	margin: 30rpx 20rpx 60rpx;
	color: #fff;
	border-radius: 80rpx;
	font-size: 30rpx;
	background-color: $primary-color;
}
</style>
